<template>
	<view>
		<dsl-navbar title="提现明细" bgTopImg='#ffffff' isBack="true"></dsl-navbar>
		<view class="text-center bg-white padding-bottom">
			<view class="particulars_pay"><text class="text-lg">￥</text>{{priceSum}}</view>
			<view>
				提现总额
			</view>
		</view>
		<view class="margin-top-xs">
			<view class=" flex rowsb padding-xl bg-white " v-for="(item,index) in withdrawalList" :key='item.id'>
				<view>
					<view class="particulars_time">02.22</view>
					<view class="particulars_week">周三</view>
				</view>
				<view style="line-height: 50rpx;">
					<view>
						<text class="margin-right-xl particulars_name">提现时间</text>
						<text>{{item.createtime |formatDate}}</text>
					</view>
					<view>
						<text class="margin-right-xl particulars_name">提现金额</text>
						<text style="color: #FE3F10;">￥{{item.money}}</text>
					</view>
					<view class="align-center">
						<text class="margin-right-xl particulars_name">到账方式</text>
						<text class=" onelineshow"style="width: 200rpx;">{{item.name}}</text>
					</view>
					<view>
						<text class="margin-right-xl particulars_name">提现状态</text>
						<!-- <text style="color: #FE3F10;">审核中...</text> -->
						<text style="color: #37BA90;">已到账</text>
					</view>
				</view>
			</view>
		</view>
		<loding v-if="isLoding"></loding>
		<view class="padding text-sm text-gray text-center">
			{{withdrawalText}}
		</view>
	</view>
</template>

<script>
	import {
		withdrawal_list
	} from '@/common/path.js'
	export default {
		data() {
			return {
				isLoding: true,
				pageData: 1,
				withdrawalList: [], //提现明细列表
				priceSum:'0',//总金额
				withdrawalText:'',
			}
		},
		onShow() {
			this.withdrawal()
		},
		filters: {
			formatDate(data) { //时间戳的过滤
				var date = new Date(data * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Y + M + D + h + m + s;
			},
		},
		methods: {
			//提现明细
			withdrawal() {
				let data = {
					page: this.pageData
				}
				this.$axios.axiosFrom('POST', withdrawal_list, data)
					.then((res) => {
						console.log('[提现明细]', res);
						if (res.code == 1) {
							if (this.pageData == 1) {
								this.withdrawalList = res.data.res
							} else {
								this.withdrawalList.push(...res.data.res)
							}
						} else {
							if (this.pageData == 1) {
								this.withdrawalList = [] //暂无
								this.withdrawalText = '暂无更多内容'
							}
						}
						this.isLoding = false
						if(res.data){
							this.priceSum = res.data.sum
						}
					})
					.catch((err) => {
						console.log('失败', err);
						this.isLoding = false
					})
			},
			onReachBottom(e) {
				this.pageData++
				this.isLoding = true
				this.withdrawal()
				// console.log('触底！！！')
			},
		}
	}
</script>

<style>
	page {
		background: #F2EFEF;
	}

	/* [提现] */
	.particulars_pay {
		font-size: 70rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FE3F10;
		opacity: 1;
		padding-top: 70rpx;
		padding-bottom: 20rpx;
	}

	.particulars_rental {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #06121E;
		opacity: 1;
	}

	.particulars_time {
		font-size: 44rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 52rpx;
		color: #3C3C3A;
		opacity: 1;
	}

	.particulars_week {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 52rpx;
		color: #3C3C3A;
		opacity: 1;
	}

	.particulars_name {
		color: #5B5E63;
	}
</style>








